<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>首页</title>
    <link href="../static/dist/semantic.min.css" th:href="@{/dist/semantic.min.css}" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/layui.css" th:href="@{/css/layui.css}">
    <link href="../static/css/index.css" th:href="@{/css/index.css}" rel="stylesheet">
    <link href="../static/css/public.css" th:href="@{/css/public.css}" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/notiflix.min.css" th:href="@{/css/notiflix.min.css}">
    <style>
        .v-play {
            margin: 7% auto;
            width: 60%;
            height: 70%;
            border-radius: 15px;
            border: #2b371d 1px solid;
            box-shadow: 0 0 5px 5px #575757;
            background-color: #070700;
        }

        .copy {
            cursor: copy;
        }

        .remarks {
            overflow: hidden;

            text-overflow: ellipsis;

            white-space: nowrap;
        }

        #approval-details {
            width: 25vw;
            height: 80%;
            /*display: none;*/
            background-color: white;
            margin-top: 2%;
            z-index: 999;
            position: fixed;
            border: black 1px solid;
            border-radius: 6px;
            box-shadow: 0 0 5px 5px #575757;
            overflow: auto;
        }

        #approval-details a:hover {
            color: #d84c32;
        }

        #ap-list {
            height: 100%;
            background-color: #f5f6f7;
            border-radius: 12px;
            position: absolute;
            width: 90%;
            overflow-y: auto;
        }

        #ap-list::-webkit-scrollbar {
            width: 14px;
            height: 14px;
        }

        #ap-list::-webkit-scrollbar-track,
        #ap-list::-webkit-scrollbar-thumb {
            border-radius: 999px;
            border: 5px solid transparent;
        }

        #ap-list::-webkit-scrollbar-track {
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) inset;
        }

        #ap-list::-webkit-scrollbar-thumb {
            min-height: 20px;
            background-clip: content-box;
            box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2) inset;
        }

        #ap-list::-webkit-scrollbar-corner {
            background: transparent;
        }

        ::-webkit-scrollbar {
            width: 14px;
            height: 14px;
        }

        ::-webkit-scrollbar-track,
        ::-webkit-scrollbar-thumb {
            border-radius: 999px;
            border: 5px solid transparent;
        }

        ::-webkit-scrollbar-track {
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) inset;
        }

        ::-webkit-scrollbar-thumb {
            min-height: 20px;
            background-clip: content-box;
            box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2) inset;
        }

        ::-webkit-scrollbar-corner {
            background: transparent;
        }

        .approval-content {
            background-color: #f2f4f6;
            overflow-y: auto;
        }

        .avl-text {
            margin-left: 10px;
            margin-top: 20px;
        }

        .as {
            /*position: absolute;*/
            /*width: 90%;*/
            /*height: 23%;*/
            width: 500px;
            height: 180px;
            margin: 5% 0 0 2%;
        }

        .as-content {
            float: left;
            margin-left: 3%;
            height: 90%;
            width: 50%;
            border: white 1px solid;
            background-color: white;
            border-radius: 12px;
            position: relative;
        }

        .as-content-cc {
            height: 85%;
            width: 100%;
            margin-top: 3%;
        }

        .as-span {
            margin: 5% 0 0 5%;
            font-size: 100%;
        }

        .as-content-cc p {
            margin-top: 3%;
        }

        .as-content-cc:hover {
            cursor: pointer;
        }

        .m-name {
            width: 40%;
            float: right;
            height: 100%;
            /* right: 10%; */
            margin-right: 25%;
            margin-top: 5%;
        }

        .m-name span {
            color: black;
            font-family: Arial, sans-serif;
        }

        .ms-list {
            width: 100%;
            height: 100%;
            overflow-y: auto;
        }

        .ms-list::-webkit-scrollbar {
            width: 14px;
            height: 14px;
        }

        .ms-list::-webkit-scrollbar-track,
        .ms-list::-webkit-scrollbar-thumb {
            border-radius: 999px;
            border: 5px solid transparent;
        }

        .ms-list::-webkit-scrollbar-track {
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) inset;
        }

        .ms-list::-webkit-scrollbar-thumb {
            min-height: 20px;
            background-clip: content-box;
            box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2) inset;
        }

        .ms-list::-webkit-scrollbar-corner {
            background: transparent;
        }

        .ms-item {
            width: 100%;
            margin: 0 auto 5%;
            height: 8%;
            border-radius: 6px;
        }

        .ms-item:hover {
            cursor: pointer;
        }

        .ms-tx {
            float: left;
            height: 100%;
            width: 20%;
            margin-left: 5%;
        }

        .ms-tx img {
            height: 80%;
            width: 80%;
            margin: 10% 0 10% 10%;
        }

        .ms-ts {
            width: 16%;
            height: 30%;
            border-radius: 25px;
            background-color: red;
            margin-left: 40%;
            margin-bottom: 20%;
        }

        .ms-ts span {
            color: white;
            margin: 0 0 15% 25%;
            font-size: 5%;
        }

        .act {
            background-color: rgba(195, 187, 196, 0.4);
        }

        .h-i-c {
            color: red;
        }

        canvas{
            left: -5%!important;
        }
    </style>
</head>
<body>
<nav class="ui inverted  attached segment m-shadow-small m-nav-fixed">
    <div class="ui inverted secondary stackable menu" style="margin-top: -20px;">
        <h2 class="ui teal header item" style="margin-left: 100px;font: italic 2em Georgia, serif;">Time-varying</h2>
        <a href="javascript:void(0)" id="approve" class="active head-item item"><i
                class="gavel icon"> </i>首页</a>
        <!--<a href="javascript:void(0)" id="ticketStat" class="active item"><i class="edit  icon"> </i>工单统计</a>-->
        <a href="javascript:void(0)" id="craft" class="head-item item"><i
                class="magic icon"> </i>工艺</a>
        <a href="javascript:void(0)" id="admin" class="head-item item"><i
                class="object ungroup outline icon"> </i>管理员</a>
        <a href="javascript:void(0)" id="hours" class="head-item item"><i
                class="street view icon"> </i>工时管理</a>
        <a href="javascript:void(0)" id="watch-ticket" class="head-item item"><i
                class="pound sign icon"> </i>查看工单</a>
        <a href="javascript:void(0)" id="add-ticket" class="head-item item"><i
                class="leaf icon"> </i>添加工单</a>
        <a href="javascript:void(0)" id="relax" class="head-item item"><i
                class="closed captioning icon"> </i>放松一下</a>

        <div class="right m-item m-mobile-hide menu">
            <div class="ui dropdown item" style="margin-right: 100px;">
                <div class="text">
                    <img class="ui avatar image" src="../static/image/test.jpg" th:src="@{/image/test.jpg}">
                    Hi~ <span id="real-name"></span>
                </div>
                <i class="dropdown icon"></i>
                <div class="menu">
                    <a href="#" th:href="@{/logout}" class="item">注销</a>
                    <a href="javascript:void(0)" class="item" id="update-password">修改密码</a>
                    <a href="javascript:void(0)" class="item" id="bindEmail">邮箱绑定</a>
                </div>
            </div>
        </div>
    </div>
</nav>
<div id="watch-work-order" style="display: none;width: 95%;height: 80%;margin: 6% auto;">
    <div class="ui top attached">
        <div class="ui  horizontal link list">
            <div class="item">
                <!--<div class="ui search">-->
                <!--<div class="ui left icon input">-->
                <!--<input class="prompt" type="text" id="search-text" placeholder="Search Work order"-->
                <!--style="width: calc(20 * 14px)">-->
                <!--<i class="search icon"></i>-->
                <!--<div class="ui positive button search-work" style="border-radius: 25px;">Go</div>-->
                <!--</div>-->
                <!--</div>-->
                <div class="ui search">
                    <div class="ui left icon input">
                        <input class="prompt" type="text" id="searchVal">
                        <i class="heart icon" id="heart-icon"></i>
                    </div>
                    <i class="inverted circular search link icon" id="search"></i>
                </div>
            </div>

            <div class="item">
                <div class="ui calendar">
                    <div class="ui input left icon">
                        <i class="calendar alternate outline icon"></i>
                        <input type="text" placeholder="查询历史记录" id="historicalTime" name="historicalTime">
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="ui selection dropdown">
                    <input name="work-order-status" id="work-order-status" type="hidden">
                    <div class="default text" id="status-text">请选择工单状态</div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <div class="item" data-value="下达">
                            下达
                        </div>
                        <div class="item" data-value="在制">
                            在制
                        </div>
                        <div class="item" data-value="完工">
                            完工
                        </div>
                        <div class="item" data-value="结案">
                            结案
                        </div>
                        <div class="item" data-value="异常">
                            异常
                        </div>
                        <div class="item" data-value="重大异常">
                            重大异常
                        </div>
                    </div>
                </div>
            </div>

            <div class="item">
                <a id='reload-work-order' style="color: #0C0C0C"><i class='sync alternate icon'></i>刷新</a>
            </div>
        </div>
        <div class="item" style="float: right">
            <span id="total"></span>
        </div>
    </div>
    <table class="ui black table">
        <thead>
        <tr style="text-align: center">
            <th>序号</th>
            <th>工单号</th>
            <th>订单号</th>
            <th>产品编码</th>
            <th>产品型号</th>
            <th>生产数量</th>
            <th>计划开工时间</th>
            <th>计划完工时间</th>
            <th>结案时间</th>
            <th>软件版本</th>
            <th>备注&特殊要求</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>

        </tbody>
        <tfoot>
        </tfoot>
    </table>
</div>
<div id="add-work-order" style="display: none;">
    <div style="width: 95%;margin: 10% auto;">
        <div class='ui fluid image'>
            <div class='ui teal  ribbon label' style="margin-top: -30px;z-index: 999;"><i
                    class='accusoft icon'></i><font
                    style='vertical-align: inherit;'><font
                    style='vertical-align: inherit;'>添加工单</font></font>
            </div>
        </div>
        <form class="ui form segment" id="work-form" autocomplete="off" onsubmit="return false">
            <div class="three fields">
                <div class="field">
                    <label>工单类型</label>
                    <div class="ui search selection dropdown">
                        <input name="workType" id="workType" type="hidden">
                        <div class="default text" data-value="P">成品工单</div>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                            <div class="item" data-value="B">半成品工单(B)</div>
                            <div class="item" data-value="P">成品工单(P)</div>
                            <div class="item" data-value="F">返修工单(F)</div>
                        </div>
                    </div>
                </div>
                <div class="field">
                    <label>产品编码</label>
                    <input type="text" name="productCode" id="productCode" placeholder="产品编码">
                </div>
                <div class="field">
                    <label>订单号</label>
                    <input type="text" name="orderNumber" id="orderNumber" placeholder="订单号">
                </div>
            </div>
            <div class="three fields">
                <div class="field">
                    <label>软件版本</label>
                    <input type="text" name="softwareVersion" id="softwareVersion"
                           placeholder="格式支持(数字,点,大小写字母,横线,下划线)">
                </div>
                <div class="field">
                    <label>产品型号</label>
                    <input type="text" name="productNumber" id="productNumber" placeholder="产品型号">
                </div>
                <div class="field">
                    <label>生产数量</label>
                    <input type="text" name="productionQuantity" id="productionQuantity" placeholder="生产数量">
                </div>
            </div>
            <div class="two fields" id="times">
                <div class="field">
                    <label>计划开始时间</label>
                    <div class="ui calendar">
                        <div class="ui input left icon">
                            <i class="calendar alternate outline icon"></i>
                            <input type="text" placeholder="计划开始时间" id="planBeginTime" name="planBeginTime">
                        </div>
                    </div>
                </div>
                <div class="field">
                    <label>计划结束时间</label>
                    <div class="ui calendar">
                        <div class="ui input left icon">
                            <i class="calendar alternate outline icon"></i>
                            <input type="text" placeholder="计划结束时间" id="planEndTime" name="planEndTime">
                        </div>
                    </div>
                </div>
            </div>
            <div class="field">
                <label>备注&特殊要求</label>
                <input type="text" name="remarks" id="remarks" placeholder="备注">
            </div>
            <div class="ui clear button">重置</div>
            <div style="float: right;">
                <div class="ui positive large submit button">提交</div>
            </div>
        </form>
    </div>
</div>
<div id="todo" style="width: 100%;height:80%;margin-top: 6%;">
    <div id="approval-details" style="display: none;">
        <div class="head" style="margin-top: 20px;">
            <span style="font-size: 16px;color: #070700;margin:20px 0 0 20px;">审批详情</span>
            <a style="float: right;font-size: 16px;margin-right: 20px;" id="close-details"><i
                    class="close icon"></i></a>
        </div>
        <div style="height: 2px;width: 100%;background-color: #f2f4f6;margin: 20px 0 0 0;"></div>
        <div class="approval-content">
            <div style="background-color: white;">
                <span style="margin:20px 0 0 20px;color: #938c8c;" id="app-id">审批编号：202201251342000566468</span>
                <p></p>
                <span style="margin:20px 0 0 20px;color: #070700;font-size: 22px;font-weight: bold;" id="app-title"><span id="app-name"></span>发起的结案审核</span>
                <p></p>
                <span style="margin:20px 0 0 20px;color: #938c8c;"><img src="../static/image/app.jpg" th:src="@{/image/app.jpg}" alt="">湖南时变通讯科技有限公司</span>
            </div>
            <div style="position: absolute;z-index: 1999;margin-left: 80%;margin-top: -6%;width: 15%;height: 10%;"><img
                    id="app-img" style="width: 100%;height: 100%;" alt=""></div>
            <div style="margin: 10px auto;width:95%;background-color: white;border: white 1px solid;border-radius: 8px;">
                <div style="margin-top: 20px;">
                    <p class="avl-text">
                        <span style="color: #938c8c;">所在部门：</span><br/>
                        <span id="app-department">生产部</span>
                    </p>
                    <p class="avl-text">
                        <span style="color: #938c8c;">审批类型：</span><br/>
                        <span id="app-type">结案审核</span>
                    </p>
                    <p class="avl-text">
                        <span style="color: #938c8c;">发起时间：</span><br/>
                        <span id="app-time">2022-01-25 16:46:32</span>
                    </p>
                    <p class="avl-text">
                        <span style="color: #938c8c;">工单号：</span><br/>
                        <a data-tooltip="进入生产" data-position="right center" class="watchTemplate" id="app-workOrderNumber">P21101201</a>
                    </p>
                    <p class="avl-text">
                        <span style="color: #938c8c;">产品编码：</span><br/>
                        <span id="app-productCode">803.01.0029</span>
                    </p>
                </div>
            </div>
            <div style="margin: 10px auto;width:95%;background-color: white;border: white 1px solid;border-radius: 8px;">
                <span style="font-size: 16px;color: #070700;margin:20px 0 0 0;">流程 <i
                        class="long arrow alternate down icon"></i></span>
                <p class="avl-text">
                    <i class="product hunt icon"></i>生产负责人(<span id="app-l1">周靖,章万强</span>)
                    <span style="float: right;margin-right: 10px;">状态：<span id="app-s1">待审核</span></span>
                </p>
                <p class="avl-text">
                    <i class="optin monster icon"></i>质检负责人(<span id="app-l2">肖艳,李娟</span>)
                    <span style="float: right;margin-right: 10px;">状态：<span id="app-s2">待审核</span></span>
                </p>
                <p class="avl-text">
                    <i class="magic icon"></i>工艺负责人(<span id="app-l3">章万强</span>)
                    <span style="float: right;margin-right: 10px;">状态：<span id="app-s3">待审核</span></span>
                </p>
                <p class="avl-text">
                    <i class="shield alternate icon"></i>质量负责人(<span id="app-l4">江永贤</span>)
                    <span style="float: right;margin-right: 10px;">状态：<span id="app-s4">待审核</span></span>
                </p>
                <p class="avl-text">
                    <i class="edit icon"></i>计划负责人(<span id="app-l5"></span>)
                    <span style="float: right;margin-right: 10px;">状态：<span id="app-s5">待审核</span></span>
                </p>
            </div>
        </div>
    </div>
    <div class="ui two column grid" style="height: 100%;margin-left: 2%;width: 100%;">
        <div class="column" style="width: 65%;">
            <div class="" style="height: 100%;">
                <div class="" style="height: 100%;width: 80%;">
                    <!--<div class='ui fluid image' style="position: absolute;">-->
                    <!--<div class='ui black ribbon label'><i class='accusoft icon'></i><font-->
                    <!--style='vertical-align: inherit;'><font style='vertical-align: inherit;'>生产信息</font></font>-->
                    <!--</div>-->
                    <!--</div>-->
                    <div class="ui  horizontal link list" style="margin-top: 5%;width: 100%;">
                        <div class="item">
                            <label>年</label>
                            <div class="ui search selection dropdown">
                                <input name="year" id="year" type="hidden">
                                <div class="default text default-year"></div>
                                <i class="dropdown icon"></i>
                                <div class="menu" id="default-year-menu">

                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <label>月</label>
                            <div class="ui search selection dropdown">
                                <input name="month" id="month" type="hidden">
                                <div class="default text default-month"></div>
                                <i class="dropdown icon"></i>
                                <div class="menu" id="default-month-menu">

                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <label>日</label>
                            <div class="ui search selection dropdown">
                                <input name="day" id="day" type="hidden">
                                <div class="default text default-day"></div>
                                <i class="dropdown icon"></i>
                                <div class="menu" id="default-day-menu">

                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <label>产品编码</label>
                            <div class="ui search selection dropdown">
                                <input name="productC" id="productC" type="hidden">
                                <div class="default text default-productC"></div>
                                <i class="dropdown icon"></i>
                                <div class="menu" id="default-productC-menu">

                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="ui dropdown item">
                                <span style="color: black;">Export</span>
                                <i class="dropdown icon"></i>
                                <div class="menu">
                                    <a class="item" id="export-year"><i class="dna icon"></i>导出年报</a>
                                    <a class="item" id="export-month"><i class="bullseye icon"></i>导出月报</a>
                                    <a class="item" id="export-day"><i class="adjust icon" ></i>导出日报</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="main2" style="width: 100%;height: 80%;margin-right: 10%;">

                    </div>
                </div>
            </div>
        </div>
        <div class="column" style="left: 2%;width: 33%;">
            <div class=""
                 id="ap-list">

            </div>
        </div>
    </div>
</div>

<div id="video" class="v-play" style="display: none;">
    <video id="exp" style="height: 100%;width: 100%;border-radius: 15px;border: #2b371d 1px solid;" controls="controls"
           autoplay="autoplay"
           loop="loop">
        <source id="sp" src="" type="video/mp4"/>
    </video>
</div>
<div class="ui modal update-password">
    <div class="header">修改密码</div>
    <i class="close icon"></i>
    <form id="update-password-form" class="ui form segment" onsubmit="return false" autocomplete="off">
        <div class="field">
            <label>请输入新密码</label>
            <input type="password" name="password" id="new-password" placeholder="请输入新密码 格式: 数字&小写英文 长度:6-13">
        </div>
        <div class="field">
            <label>确认密码</label>
            <input type="password" name="password" id="sure-password" placeholder="确认再次输入密码">
        </div>
        <div class="ui rest-password reset button">重置</div>
        <div style="float: right;">
            <div class="ui positive submit button" id="updatePassword-btn">确认</div>
        </div>
    </form>
</div>

<div class="ui modal bindEmailModal">
    <div class="header">邮箱绑定</div>
    <i class="close icon"></i>
    <form id="emailFrom" class="ui form segment" onsubmit="return false" autocomplete="off">
        <div class="field">
            <label>请输入邮箱</label>
            <input type="text" name="email" id="email" placeholder="请输入邮箱">
        </div>
        <div class="ui reset button">重置</div>
        <div style="float: right;">
            <div class="ui positive submit button">提交</div>
        </div>
    </form>
</div>

<!--<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>-->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>-->
<script src="../static/dist/semantic.min.js" th:src="@{/dist/semantic.min.js}"></script>
<script src="../static/js/init.js" th:src="@{/js/init.js}"></script>
<script src="../static/js/laydate.min.js" th:src="@{/js/laydate.min.js}"></script>
<script src="../static/js/layui.js" th:src="@{/js/layui.js}"></script>
<script src="../static/js/echarts.min.js" th:src="@{/js/echarts.min.js}"></script>
<script src="../static/js/notiflix.min.js" th:src="@{/js/notiflix.min.js}"></script>
<script src="../static/js/notiflix-aio.min.js" th:src="@{/js/notiflix-aio.min.js}"></script>
<script src="../static/js/public.js" th:src="@{/js/public.js}"></script>
<script src="../static/js/jquery.fileDownload.min.js" th:src="@{/js/jquery.fileDownload.min.js}"></script>
<script src="../static/js/clipboard.min.js" th:src="@{/js/clipboard.min.js}"></script>
<script src="../static/js/index.js" th:src="@{/js/index.js}"></script>

</body>
</html>
